<script setup>
const username = "王陈";

const textContent = "标签文本内容";
const htmlContent = "<h1>标签文本内容</h1>";

const age = 1;

const hobbiesList = [
  {id: 1, value: "听歌"},
  {id: 2, value: "看电影"},
  {id: 3, value: "打游戏"},
  {id: 4, value: "看小说"},
  {id: 5, value: "看动漫"},
]

function handleClick() {
  console.log("click");
}
</script>

<template>
  <!--v-text -->
  <p v-text="textContent"></p>
  <p>{{ textContent }}</p>

  <p v-html="htmlContent"></p>

  <h1 style="position: absolute; top: 50%; left: 50%;">你好,{{ username }}</h1>

  <p v-if="age>1">年龄大于1岁</p>
  <p v-if="age<=1">年龄小于等于1岁</p>


  <ul>
    <li v-for = "item in hobbiesList" :key="item.id">{{ item.id }}  , {{item.value}}</li>
  </ul>

  <button v-on:click="handleClick"></button>

  <a-button v-on:click="handleClick"></a-button>

</template>

<style scoped>

</style>
